<template >
  <div id="echarts" :style="'height:'+ height +'px;'" ref="refChart"></div>
</template>

<script>
// 首先引入三个包
import echarts from 'echarts'
import 'echarts-gl'
import 'echarts/map/js/world.js'
import { Coordinate, lineCoor, spot } from '../data/Coordinate'

export default {
  data () {
    return {
      height: '',
      // 地球必需图片，可以去echarts官网下载
      baseTexture: require('@/assets/images/baseTexture2.png'),
      heightTexture: require('@/assets/images/heightTexture.jpg'),
      charity_top: require('@/assets/images/charity_top.png'),
      geoCoordMap: Coordinate
    }
  },
  created () {
    this.height = document.documentElement.clientHeight
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const myChart = echarts.init(this.$refs.refChart)

      // 地球组件。组件提供了地球的绘制以及相应的坐标系
      const globe = {
        environment: this.charity_top,
        baseTexture: this.baseTexture,
        heightTexture: this.heightTexture,
        top: 'middle',
        left: 'center',
        displacementScale: 0,
        shading: 'lambert',
        light: { // 光照阴影
          main: {
            color: '#C71585', // 光照颜色
            intensity: 8.2, // 光照强度
            shadowQuality: 'ultra', // 阴影亮度
            shadow: true, // 是否显示阴影
            alpha: 40,
            beta: -30
          },
          ambient: {
            intensity: 4.6
          }
        },
        viewControl: {
          alpha: 30,
          beta: 160,
          targetCoord: [70.46, 35.92],
          autoRotate: true,
          autoRotateAfterStill: 10,
          distance: 240,
          autoRotateSpeed: 4
        }
      }

      // 设置 3d 坐标线
      const series = [{
        type: 'lines3D',
        coordinateSystem: 'globe',
        effect: {
          show: true,
          period: 5, // 速度
          trailLength: 0.1 // 尾部阴影
        },
        blendMode: 'lighter',
        lineStyle: {
          // 航线的视图效果
          color: '#8A2BE2',
          width: 3,
          opacity: 1
        },
        silent: false,
        data: lineCoor
      }, {
        type: 'scatter3D',
        blendMode: 'lighter',
        coordinateSystem: 'globe',
        showEffectOn: 'render',
        zlevel: 2,
        effectType: 'ripple',
        symbolSize: 15,
        rippleEffect: {
          period: 4,
          scale: 4,
          brushType: 'fill'
        },
        hoverAnimation: true,
        label: {
          normal: {
            show: true,
            position: 'right',
            formatter: function (params) {
              if (params.dataIndex === 0) {
                return '中国'
              } else if (params.dataIndex === 1) {
                return '韩国'
              } else if (params.dataIndex === 2) {
                return '美国'
              } else if (params.dataIndex === 3) {
                return '法国'
              } else if (params.dataIndex === 4) {
                return '英国'
              } else if (params.dataIndex === 5) {
                return '日本'
              } else if (params.dataIndex === 6) {
                return '德国'
              } else if (params.dataIndex === 7) {
                return '印度'
              } else if (params.dataIndex === 8) {
                return '加拿大'
              } else if (params.dataIndex === 9) {
                return '玻利维亚'
              } else if (params.dataIndex === 10) {
                return '哥伦比亚'
              } else if (params.dataIndex === 11) {
                return '俄罗斯'
              } else if (params.dataIndex === 12) {
                return '澳大利亚'
              } else if (params.dataIndex === 13) {
                return '中非'
              } else if (params.dataIndex === 14) {
                return '阿尔及利亚'
              } else if (params.dataIndex === 15) {
                return '巴西'
              } else if (params.dataIndex === 16) {
                return '冰岛'
              } else if (params.dataIndex === 17) {
                return '巴基斯坦'
              }
            },
            textStyle: {
              fontSize: 18,
              color: '#FFD700',
              fontWeight: 'bold',
              backgroundColor: 'rgba(75,0,130,0.5)'
            // backgroundColor: 'transparent'
            }
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(50,205,50)'
          }
        },
        data: spot
      }]

      const option = {
        backgroundColor: 'rgba(255,255,255)', // canvas的背景颜色
        globe: globe,
        series: series
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echarts{
  width: 100%;
}

h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
